<template>
  <div class="serchlist-warpper">
    <SearchItem
      icon="apps-o"
      subTitle="类别"
      :title="category.categoryText"
      @onClick="showList(category.categoryText,'category')"
      v-if="category"
    ></SearchItem>
    <SearchItem
      icon="contact"
      subTitle="作者"
      :title="author.author"
      @onClick="showList(author.author,'author')"
      v-if="author"
    ></SearchItem>
    <SearchItem
      icon="newspaper-o"
      subTitle="出版社"
      :title="publisher.publisher"
      @onClick="showList(publisher.publisher,'publisher')"
      v-if="publisher"
    ></SearchItem>
    <SearchTable
      :data="searchTableData"
      @onClick="onBookClick"
    ></SearchTable>
  </div>
</template>

<script>
import SearchItem from './SearchItem'
import SearchTable from './SearchTable'
export default {
  components: { SearchItem, SearchTable },
  props: { data: Object },
  computed: {
    category () {
      if (this.data && this.data.category && this.data.category.length > 0) {
        return this.data.category[0]
      } else {
        return null
      }
    },
    author () {
      if (this.data && this.data.author && this.data.author.length > 0) {
        return this.data.author[0]
      } else {
        return null
      }
    },
    publisher () {
      if (this.data && this.data.publisher && this.data.publisher.length > 0) {
        return this.data.publisher[0]
      } else {
        return null
      }
    },
    searchTableData () {
      return this.data.book
    }
  },
  methods: {
    showList (text, key) {
      console.log('searchlist-showlist', text, key)
      this.$router.push({ path: '/pages/list/main', query: { text, key } })
    },
    // 点击某本书，跳转到书的详情页面
    onBookClick (book) {
      console.log('SearchList', book)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>